<template>
  <view class="order-list">
    <view class="order-item" v-for="(item, index) in list" :key="index" @click="handleControls('select', item)">
      <view class="dashed">
        <!-- 门店&&订单状态或者售后单状态 -->
        <view class="header">
          <view class="shop-name">
            <text class="iconfont shop-icon">&#xe6bf;</text>
            <view class="name">
              <text>{{ shops.find(val => val.id === item.shopId)?.shopName || '--' }}</text>
              <text v-if="item.storeName">-{{ item.storeName }}</text>
            </view>
          </view>
          <view class="status" @click.stop="handleControls('tracks', item)">
            <text v-if="item.orderStatus">{{ OrderStatusEnum.data.find(val => val.value === item.orderStatus)?.name }}</text>
            <text v-else>{{ RefundStatusEnum.data.find(val => val.value === item.refundStatus)?.name }}</text>
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
        <!-- 渠道信息&&订单标签 -->
        <view class="source">
          <view class="left">
            <text class="channel" :style="{ backgroundColor: getChannelCls(item.thirdChannelId) }">{{ getAbbreviation(item.thirdChannelId) }}</text>
            <text class="symbol">#</text>
            <text class="number">{{ item.orderSeq }}</text>
            <text class="tag" v-if="item.channelDeliveryType">{{ ChannelDeliveryTypeEnum.data.find(val => val.value === item.channelDeliveryType)?.name }}</text>
            <text class="tag" v-else-if="item.performanceType">{{ PerformanceTypeEnum.data.find(val => val.value === item.performanceType)?.name }}</text>
            <text class="tag other" v-if="item.shipmentStatus">部分发货</text>
            <text class="tag other" v-if="item.isHighValueOrder">高价值</text>
            <text class="tag other" v-if="item.isAdjust">调整单</text>
            <block v-if="item.refundProcessStatusList">
              <text
                class="tag other"
                v-for="(tItem, tIndex) in item.refundProcessStatusList"
                :key="tIndex"
              >{{ refundProcessStatusType.find(val => val.value === tItem)?.name }}</text>
            </block>
            <text class="tag other" v-if="item.refundType && item.refundMethod">{{ refundOrderType.find(val => item.refundType === val.value)?.name }}-
              {{ refundMethodTypeEnum.data.find(val => val.value === item.refundMethod)?.name }}</text>
          </view>
          <view class="right" v-if="item.orderStatus" @click.stop="handleControls('print', item)">
            <text class="iconfont print">&#xe6be;</text>
            <text>打印</text>
          </view>
        </view>
        <!-- 自提或者送达提示 -->
        <view class="delivery" v-if="item.orderStatus">
          <text class="per-tag" v-if="item.isReservation">预订单</text>
          <text class="text" v-if="item.performanceType !== PerformanceTypeEnum.LOGISTICS.value">{{ formatTime(item.expectedDeliveryEndTime) }}
            前{{ (ChannelDeliveryTypeEnum.USER_PICK_UP.value === item.channelDeliveryType ||
                PerformanceTypeEnum.SELF_PICK_UP.value === item.performanceType) ? '自提' : '送达'
            }}</text>
        </view>
        <!-- 取货码 -->
        <view
          class="common-tips"
          v-if="item.thirdChannelPickupCode && item.isHighValueOrder"
        >取货码:{{ item.thirdChannelPickupCode }} 含高价值商品，请与骑手校验取货码再交货</view>
        <!-- 订单异常提示 -->
        <view
          class="common-tips abnormal"
          v-if="item.abnormalReason && (item.orderStatus === OrderStatusEnum.DELIVERY_ABNORMAL.value || item.orderStatus === OrderStatusEnum.DELIVERY_CANCEL.value)"
        >{{ item.abnormalReason }}</view>
      </view>
      <!-- 骑手信息 -->
      <view class="user dashed" v-if="item.riderName || item.riderPhone">
        <view class="user__left">
          <view class="info">
            <text class="name">骑手</text>
            <text class="name">{{ item.riderName || '--' }}</text>
            <text class="tel">{{ item.riderPhone || '--'}}</text>
          </view>
        </view>
        <view class="user__right">
          <text class="iconfont" @click.stop="handlePhone(item.riderPhone)">&#xe6bd;</text>
        </view>
      </view>
      <!-- 用户信息 -->
      <view class="user">
        <view class="user__left">
          <view class="info">
            <text class="name">顾客</text>
            <text class="name">{{ item.clientName }}</text>
            <text class="tel" v-if="item.orderingPhone">{{ formatPhone(item) }}</text>
          </view>
          <view class="address">{{ item.clientAddress || '地址：无' }}</view>
        </view>
        <view class="user__right">
          <text class="iconfont" @click.stop="handlePhone(item.clientPhone)">&#xe6bd;</text>
        </view>
      </view>
      <!-- 售后单的原因 -->
      <view class="refund-remark" v-if="item.refundReason || item.pictures?.length" @click.stop>
        <view class="remark" v-if="item.refundReason">售后原因：{{ item.refundReason }}{{ item.refundRemark ? `_${item.refundRemark}` : '' }}</view>
        <view class="pictures" v-if="item.pictures?.length">
          <image
            v-for="(pItem, pIndex) in item.pictures"
            :src="pItem"
            :key="pIndex"
            mode="aspectFill"
            @click="onPreviewImages(item.pictures, pIndex)"
          />
        </view>
      </view>
      <!-- 售后单美团骑手返货 -->
      <view
        class="return-goods"
        v-if="item.isReturnGoods && item.deliveryTime && item.thirdChannelId === ChannelTypeEnum.MT.value"
        @click.stop="handleControls('returnGoods', item)"
      >
        <text>骑手返货中，预计{{ formatTime(item.deliveryTime) }}到店</text>
        <text class="iconfont icon-arrow-right"></text>
      </view>
      <view class="remark-tips" v-if="item.clientRemarks">备注：{{ item.clientRemarks }}</view>
      <!-- 拣货单信息 -->
      <view
        class="status-text"
        v-if="item.pickerName || (item.orderStatus === OrderStatusEnum.NEW.value ||
          item.orderStatus === OrderStatusEnum.RECEIVES.value ||
          item.orderStatus === OrderStatusEnum.REVIEWED.value)"
      >
        <text class="name">
          <text v-if="item.pickerName">拣货员：{{ item.pickerName }}</text>
        </text>
        <text
          v-if="item.orderStatus === OrderStatusEnum.NEW.value ||
          item.orderStatus === OrderStatusEnum.RECEIVES.value ||
          item.orderStatus === OrderStatusEnum.REVIEWED.value"
          class="fix"
          :class="{active: formatDiffTime(item.predictPickCompletedTime).includes('剩余')}"
        >
          拣货{{ formatDiffTime(item.predictPickCompletedTime) }}
        </text>
      </view>
      <!-- 支付渠道退款失败 -->
      <view class="refund-tips" v-if="item.payErrorDesc">
        <text class="iconfont">&#xe6c7;</text>
        <text class="text">支付渠道退款失败：“{{item.payErrorDesc}}”请联系总部协助处理!</text>
      </view>
      <!-- 订单信息 -->
      <view class="price" @click.stop="handleControls('more', item)">
        <view class="price__left">
          <text class="count">{{ item.goodsCount || 0 }}件商品</text>
          <text class="pay">
            <text class="text">付款金额：</text>
            <text class="unit">￥</text>
            <text class="number price-icon">{{ (item.payAmount || item.refundAmount || item.payPrice || 0).toFixed(2) }}</text>
          </text>
        </view>
        <view class="price__right">
          <text>{{ item.orderStatus ? '订单' : '售后' }}详情</text>
          <text :class="['iconfont icon-arrow-down', { 'icon-arrow-up': item.showMore }]"></text>
        </view>
      </view>
      <view class="more-wrap" v-if="item.showMore && item.details">
        <view class="goods-list">
          <view class="goods-item" v-for="(oItem, oIndex) in orderGoods(item.details)" :key="oIndex">
            <view class="item-flex">
              <view class="image-wrap">
                <image :src="oItem.primaryPicUrl"/>
              </view>
              <view class="good-info">
                <view class="title-wrap">
                  <text class="name oneline-hide">{{ oItem.goodsName || oItem.name}}</text>
                  <text>¥ {{ oItem.sellPrice || oItem.refundPrice }}</text>
                </view>
                <view class="describe">
                  <text>编码：{{ oItem.skuCode || '' }}</text>
                  <text class="through" v-if="oItem.sellPrice && oItem.originalPrice > oItem.sellPrice">¥{{ oItem.originalPrice }}</text>
                  <text class="through" v-if="oItem.refundPrice && oItem.originalPrice > oItem.refundPrice">¥{{ oItem.originalPrice }}</text>
                </view>
                <view class="describe">条码：{{ oItem.barcode || '' }}</view>
                <view class="describe">
                  <text>重量：{{ oItem.weight || 0 }}g</text>
                  <text :class="['ele', {active: oItem.quantity > 1 }]">x {{ oItem.quantity || '' }}</text>
                </view>
                <view class="describe" v-if="oItem.featureRemark">
                  <text>{{ oItem.featureRemark }}</text>
                </view>
                <view class="goods-tips" v-if="oItem.refundStatus === RefundStatusEnum.REFUNDED.value && oItem.refundQuantity">
                  <text class="tips-icon">!</text>
                  <text class="tips-text">{{ oItem.refundQuantity < oItem.quantity ? '部分退' : '已退款' }}</text>
                  <text class="tips-refund-text">共退：{{ oItem.refundQuantity || '' }}件</text>
                  <text class="tips-top" />
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="cell-group">
          <view class="cell-item">
            <view class="label">商品总价</view>
            <view class="value">¥ {{ item.details.goodsAmount || 0 }}</view>
          </view>
          <view class="cell-item">
            <view class="label">配送费</view>
            <view class="value">¥ {{ item.details.deliveryAmount || 0 }}</view>
          </view>
          <view class="cell-item">
            <view class="label">包装费</view>
            <view class="value">¥ {{ item.details.packageAmount || 0 }}</view>
          </view>
          <view class="cell-item">
            <view class="label">优惠金额</view>
            <view class="value active">-¥ {{ item.details.discountAmount || 0 }}</view>
          </view>
          <view class="cell-total">
            <text class="m-left">共{{ item.goodsCount || 0 }}件商品</text>
            <text class="m-right">
              <text>{{ item.details.refundOrderId ? '退款' : '实付' }}金额：</text>
              <text>
                <text class="font">¥</text>
                <text class="m-price price-icon">{{ item.details.payAmount || item.details.refundAmount }}</text>
              </text>
            </text>
          </view>
          <view class="cell-item">
            <view class="label">{{ item.orderStatus ? '订单号' : '退单号'}}</view>
            <view class="value">
              <text>{{ item.orderStatus ? item.details.channelOrderNo : item.details.channelRefundOrderNo }}</text>
              <text class="iconfont m-l-10" @click.stop="copyNumber(item.orderStatus ? item.details.channelOrderNo : item.details.channelRefundOrderNo)">&#xe6cb;</text>
            </view>
          </view>
          <view class="cell-item" v-if="item.refundStatus">
            <view class="label">关联订单号</view>
            <view class="value">{{ item.details.channelOrderNo }}</view>
          </view>
          <view class="cell-item">
            <view class="label">下单时间</view>
            <view class="value">{{ item.details.createTime || '--' }}</view>
          </view>
        </view>
      </view>
      <view class="btn-wrapper" @click.stop>
        <Permission code="ly_order_info_part_refund">
          <u-button
            v-if="item.isPartReturn"
            :custom-style="{
              ...customStyle,
              color: '#2D71FD',
              backgroundColor: '#fff'
            }"
            @click="handleControls('partReturn', item)"
          >部分退货</u-button>
        </Permission>
        <Permission code="ly_order_cancel">
          <u-button
            v-if="item.isReturn"
            :custom-style="{
              ...customStyle,
              color: '#2D71FD',
              backgroundColor: '#fff'
            }"
            @click="$confirm(() => handleControls('cancelOrder', item), { content: '您是否确认取消订单？' })"
          >取消订单</u-button>
        </Permission>
        <Permission code="ly_order_info_batch_receive">
          <u-button
            type="primary"
            v-if="item.orderStatus === OrderStatusEnum.NEW.value"
            :custom-style="customStyle"
            @click="handleControls('receive', item)"
          >接单</u-button>
        </Permission>
        <Permission code="ly_order_info_batch_prepare">
          <u-button
            type="primary"
            v-if="(item.orderStatus === OrderStatusEnum.RECEIVES.value || item.orderStatus === OrderStatusEnum.REVIEWED.value) && !pickConfig.pickMode"
            :custom-style="customStyle"
            @click="handleControls('prepare', item)"
          >备货完成</u-button>
        </Permission>
        <Permission code="ly_order_info_batch_verify">
          <u-button
            type="primary"
            v-if="(item.orderStatus === OrderStatusEnum.STOCK_UP.value || item.orderStatus === OrderStatusEnum.WAIT_PICK_UP.value)
             && (ChannelDeliveryTypeEnum.USER_PICK_UP.value === item.channelDeliveryType || PerformanceTypeEnum.SELF_PICK_UP.value === item.performanceType)"
            :custom-style="customStyle"
            @click="handleControls('scan', item)"
          >扫码核验</u-button>
        </Permission>
        <u-button
          type="primary"
          v-if="(item.orderStatus === OrderStatusEnum.STOCK_UP.value || item.orderStatus === OrderStatusEnum.WAIT_PICK_UP.value)
           && item.channelDeliveryType === ChannelDeliveryTypeEnum.SELLER_DELIVER.value"
          :custom-style="customStyle"
          @click="handleControls('start', item)"
        >开始配送</u-button>
        <Permission code="ly_order_info_deliver">
          <u-button
            type="primary"
            v-if="item.orderStatus === OrderStatusEnum.DELIVERING.value &&
            item.channelDeliveryType === ChannelDeliveryTypeEnum.SELLER_DELIVER.value"
            :custom-style="customStyle"
            @click="$confirm(() => handleControls('finish', item), { content: '您是否确认完成订单？'})"
          >配送完成</u-button>
        </Permission>
        <u-button
          type="primary"
          v-if="(item.orderStatus === OrderStatusEnum.STOCK_UP.value || item.orderStatus === OrderStatusEnum.WAIT_PICK_UP.value)
             && item.performanceType === PerformanceTypeEnum.LOGISTICS.value"
          :custom-style="customStyle"
          @click="handleControls('logistics', item)"
        >物流发货</u-button>
        <Permission code="ly_refund_order_batch_audit">
          <view class="dis-flex flex-x-end">
            <u-button
              v-if="isRefundOrderCheck(item)"
              :custom-style="{
                ...customStyle,
                color: '#2D71FD',
                backgroundColor: '#fff'
              }"
              @click="$confirm(() => handleControls('returnOrder', item, 0), {content: '您是否确认驳回？'})"
            >驳回</u-button>
            <u-button
              type="primary"
              v-if="isRefundOrderCheck(item)"
              :custom-style="customStyle"
              @click="$confirm(() => handleControls('returnOrder', item, 1), {content: '您是否同意退款？'})"
            >{{ item.refundMethod === refundMethodTypeEnum.RETURN.value ? '仅退款无需退货' : '同意退款' }}</u-button>
            <u-button
              type="primary"
              v-if="item.refundMethod === refundMethodTypeEnum.RETURN.value && isRefundOrderCheck(item)"
              :custom-style="customStyle"
              @click="$confirm(() => handleControls('returnOrder', item, 2), {content: '您是否同意退货？'})"
            >同意退货</u-button>
            <u-button
              type="primary"
              :custom-style="customStyle"
              v-if="isRefundOrderConfirm(item)"
              @click="$confirm(() => handleControls('refundConfirm', item, 1), { content: '您是否确认收货并退款？' })"
            >确认收货并退款
            </u-button>
            <u-button
              :custom-style="{
                ...customStyle,
                color: '#2D71FD',
                backgroundColor: '#fff'
              }"
              v-if="isRefundOrderConfirm(item)"
              @click="$confirm(() => handleControls('refundConfirm', item, 2), { content: '您是否确认拒绝收货？' })"
            >拒绝收货
            </u-button>
          </view>
        </Permission>
        <u-button
          type="primary"
          :custom-style="customStyle"
          v-if="item.refundStatus === RefundStatusEnum.WAIT_RETURNED.value && item.thirdChannelId === ChannelTypeEnum.DY.value"
          @click="handleControls('way', item)"
        >设置取货方式
        </u-button>
      </view>
    </view>
  </view>
</template>
<script>
import store from '@/store'
import OrderStatusEnum from "@/common/enum/order/orderStatus"
import RefundStatusEnum from "@/common/enum/order/refundStatus"
import refundMethodTypeEnum from "@/common/enum/order/refundMethodType"
import ChannelTypeEnum from "@/common/enum/channelType"
import ChannelDeliveryTypeEnum from "@/common/enum/order/channelDeliveryType"
import PerformanceTypeEnum from "@/common/enum/order/performanceType"
import { diffTime, formatTime } from '@/utils/util'

/**
 * 退单类型
 */
const refundOrderType= [
  { name: '整单退', value: 1 },
  { name: '部分退', value: 2 }
]

/**
 * 订单退货状态
 */
const refundProcessStatusType = [
  { name: '退单审批中', value: 1 },
  { name: '部分退', value: 2 },
  { name: '已退款', value: 3 }
];


export default {
  name: "index",
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      formatTime,
      iconStyle: {
        marginRight: '28rpx',
        color: '#999'
      },
      customStyle: {
        height: '64rpx',
        margin: '16rpx 0 0 16rpx',
        padding: '12rpx 24rpx'
      },
      OrderStatusEnum,
      RefundStatusEnum,
      ChannelTypeEnum,
      ChannelDeliveryTypeEnum,
      PerformanceTypeEnum,
      refundMethodTypeEnum,
      refundOrderType,
      refundProcessStatusType
    }
  },
  computed: {
    channels() {
      return store.getters.channels
    },
    allChannels() {
      return store.getters.allChannels
    },
    shops() {
      return store.getters.shops
    },
    getChannelCls() {
      return (val) => {
        return this.allChannels.find(item => item.channelId === val)?.color
      }
    },
    getAbbreviation() {
      return (val) => {
        return this.allChannels.find(item => item.channelId === val)?.abbreviation
      }
    },
    isRefundOrderCheck() {
      return ({ refundStatus }) => {
        return refundStatus === RefundStatusEnum.NEW.value || refundStatus === RefundStatusEnum.CUSTOMER_EXAMINE.value
      }
    },
    isRefundOrderConfirm() {
      return ({ refundStatus, thirdChannelId }) => {
        return thirdChannelId === ChannelTypeEnum.DY.value ? refundStatus === RefundStatusEnum.RETURNING.value :
          (refundStatus === RefundStatusEnum.WAIT_RETURNED.value || refundStatus === RefundStatusEnum.RETURNING.value)
      }
    },
    formatDiffTime() {
      return (val) => {
        return diffTime(val)
      }
    },
    pickConfig() {
      return store.getters.pickConfig
    },
    orderGoods() {
      return (details) => {
        const { orderGoods, goodsList} = details
        return orderGoods || goodsList
      }
    },
    formatPhone() {
      return ({ thirdChannelId, orderingPhone}) => {
        const lastFourDigits = orderingPhone?.slice(-4)
        return thirdChannelId !== ChannelTypeEnum.APPLET.value ? `尾号(${lastFourDigits})` : orderingPhone
      }
    }
  },
  methods: {
    handleControls(type, item, review) {
      this.$emit('controls', type, item, review)
    },
    handlePhone(phone) {
      if (!phone) return this.$toast('此订单信息不全，暂无法拨打电话')
      const formatPhone = phone.replace(/-/g, ',');
      uni.makePhoneCall({
        phoneNumber: formatPhone,
        success: () => {
          console.log("调用成功!")
        },
        fail: () => {
          console.log("调用失败!")
        }
      })
    },
    // 浏览图片
    onPreviewImages(pictures, index) {
      uni.previewImage({
        current: pictures[index],
        urls: pictures
      })
    },
    // 复制单号
    copyNumber(id) {
      uni.setClipboardData({
        data: id,
        success: () => this.$toast('已复制'),
        fail: ({ errMsg }) => this.$toast('复制失败 ' + errMsg)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.order-list {

  .order-item {
    padding: 24rpx;
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 16rpx;

    .header {
      display: flex;
      justify-content: space-between;

      .shop-name {
        color: #333333;
        display: flex;
        flex: 1;

        .shop-icon {
          font-size: 36rpx;
        }

        .name {
          font-size: 28rpx;
          font-weight: bold;
          margin-left: 10rpx;
        }
      }

      .status {
        font-size: 30rpx;
        font-weight: bold;
        color: #333333;
        flex-shrink: 0;
        text-align: right;
      }
    }

    .source {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 26rpx;

      .left {
        display: flex;
        align-items: center;

        .channel {
          font-size: 24rpx;
          padding: 5rpx 8rpx;
          border-radius: 6rpx;
          color: #fff;
          margin-right: 10rpx;
        }

        .symbol {
          font-size: 26rpx;
          vertical-align: baseline;
          margin-right: 8rpx;
        }

        .number {
          font-size: 32rpx;
          font-weight: 600;
        }

        .tag {
          background: #E8FFEA;
          color: #00B42A;
          padding: 5rpx 10rpx;
          border-radius: 8rpx;
          font-size: 20rpx;
          margin-left: 8rpx;
        }

        .other {
          background: #f0f7ff;
          color: #2D71FD;
        }
      }

      .right {
        padding: 8rpx 16rpx;
        font-size: 24rpx;
        border: 1rpx solid #EEEEEE;
        border-radius: 8rpx;

        .iconfont {
          margin-right: 6rpx;
        }
      }
    }

    .delivery {
      margin-top: 20rpx;

      .per-tag {
        padding: 5rpx 10rpx;
        border-radius: 4rpx;
        font-size: 20rpx;
        background: #2D71FD;
        color: #fff;
        margin-right: 10rpx;
      }

      .text {
        font-size: 24rpx;
      }
    }

    .common-tips {
      background: #F0F7FF;
      color: #2D71FD;
      font-size: 24rpx;
      padding: 16rpx;
      margin-top: 20rpx;
      border-radius: 8rpx;
    }

    .abnormal {
      background: #FFF7E8;
      color: #595959;
    }

    .dashed {
      border-bottom: 2rpx dashed #eee;
      padding-bottom: 16rpx;
    }

    .user {
      margin-top: 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &__left {
        width: calc(100% - 80rpx);
        margin-right: 16rpx;

        .info {
          font-size: 28rpx;

          .name {
            font-weight: 500;
            margin-right: 12rpx;
          }

          .tel {
            color: #666666;
          }
        }

        .address {
          margin: 16rpx 0;
          color: #999999;
          font-size: 24rpx;
        }
      }

      &__right {
        width: 64rpx;
        height: 64rpx;
        border-radius: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FAFAFA;
        border: 2rpx solid #EEEEEE;

        .iconfont {
          font-size: 30rpx;
        }
      }
    }

    .refund-remark {
      margin-top: 24rpx;
      padding: 16rpx;
      background: #FAFAFA;
      border-radius: 8rpx;

      .remark {
        font-size: 24rpx;
        color: #333;
      }

      .pictures {
        margin-top: 16rpx;

        image {
          width: 112rpx;
          height: 112rpx;
          border-radius: 4rpx;
          margin-right: 8rpx;
          margin-bottom: 8rpx;
        }
      }
    }

    .return-goods {
      background: #F0F7FF;
      color: #2D71FD;
      font-size: 24rpx;
      padding: 16rpx;
      margin-top: 16rpx;
      border-radius: 8rpx;

      .iconfont {
        margin-left: 5rpx;
      }
    }

    .remark-tips {
      background: #FFF7E8;
      color: #FF7D00;
      font-size: 24rpx;
      padding: 16rpx;
      margin-top: 24rpx;
      border-radius: 8rpx;
    }

    .status-text {
      padding: 16rpx 0;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .name {
        color: #666666;
      }

      .fix {
        color: #F53F3F;

        &.active {
          color: #00B42A;
        }
      }
    }

    .refund-tips {
      margin-top: 20rpx;
      padding: 16rpx 12rpx;
      display: flex;
      align-items: center;
      border-radius: 10rpx;
      border: 2rpx solid var(---Brand3-Disabled, #7DBCFF);
      background: var(---Brand1-light, #E6F4FF);

      .iconfont {
        color: #2D71FD;
      }

      .text {
        margin-left: 12rpx;
        font-size: 24rpx;
      }
    }

    .price {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 16rpx;
      margin-top: 16rpx;
      border-top: 2rpx dashed #eee;

      &__left {
        .count {
          font-size: 28rpx;
          font-weight: bold;
        }

        .pay {
          font-size: 24rpx;
          color: #333333;
          margin-left: 16rpx;

          .text {
            color: #666666;
          }

          .unit {
            vertical-align: baseline;
          }

          .number {
            font-size: 32rpx;
          }
        }
      }

      &__right {
        font-size: 28rpx;

        .iconfont {
          margin-left: 5rpx;
        }
      }
    }

    .more-wrap {
      margin-top: 20rpx;

      .goods-list {

        .goods-item {
          padding: 16rpx 0;

          .item-flex {
            display: flex;

            .image-wrap {
              width: 128rpx;
              height: 128rpx;
              position: relative;

              image {
                width: 100%;
                height: 100%;
                border-radius: 4rpx;
              }
            }

            .good-info {
              flex: 1;
              margin-left: 16rpx;
              position: relative;

              .title-wrap {
                font-size: 28rpx;
                font-weight: 600;
                display: flex;
                justify-content: space-between;
                margin-bottom: 10rpx;

                .name {
                  max-width: 400rpx;
                }
              }

              .describe {
                font-size: 24rpx;
                line-height: 42rpx;
                color: #999;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .through {
                  text-decoration: line-through;
                }

                .ele {
                  font-weight: 500;
                  color: #333;

                  &.active {
                    color: #F53F3F;
                  }
                }
              }

              .goods-tips {
                font-size: 24rpx;
                display: flex;
                align-items: center;
                padding: 10rpx 16rpx;
                background: #fff1f1;
                border-radius: 8rpx;
                margin-top: 10rpx;
                position: relative;
                color: #ff4141;

                .tips-icon {
                  width: 28rpx;
                  height: 28rpx;
                  border-radius: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 22rpx;
                  border: 1rpx solid #ff4141;
                }

                .tips-text {
                  line-height: 28rpx;
                  padding-left: 12rpx;
                }

                .tips-refund-text {
                  margin-left: auto;
                }

                .tips-top {
                  width: 16rpx;
                  height: 16rpx;
                  background: #fff1f1;
                  transform: rotate(45deg);
                  position: absolute;
                  z-index: 1;
                  top: -8rpx;
                  right: 12rpx;
                }
              }
            }
          }

          .item-bottom {

            .input-wrap {
              width: 228rpx;
              margin: 0 20rpx;

              input {
                padding: 5rpx 20rpx;
                border: 1px solid #c8c9cc;
                border-radius: 8rpx;
              }
            }

            .part-money {
              display: flex;
              align-items: center;
              justify-content: space-around;
              font-size: 26rpx;

              .part-left {
                display: flex;
                align-items: center;
              }
            }

            .weight-item {
              display: flex;
              align-items: center;
              font-size: 26rpx;
              margin-bottom: 20rpx;
            }
          }
        }
      }

      .cell-group {

        .cell-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 20rpx 0;

          .label {
            color: #666;
          }

          .active {
            color: #F53F3F;
            width: 500rpx;
            text-align: right;
          }
        }

        .cell-total {
          text-align: right;
          background: #FAFAFA;
          padding: 16rpx 0;
          border-radius: 16rpx;

          .m-left {
            margin-right: 20rpx;
          }

          .m-right {
            font-weight: 500;

            .font {
              font-size: 24rpx;
            }

            .m-price {
              font-size: 32rpx;
              margin-left: 5rpx;
            }
          }
        }
      }
    }

    .btn-wrapper {
      margin-top: 8rpx;
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      align-items: center;
    }
  }
}
</style>
